अपने वेब एप्लिकेशन में फेस रिकग्निशन के जरिए किसी यूजर को ऑथेंटिकेट कैसे करें

प्रमाणीकरण आपके वेब एप्लिकेशन का एक बहुत ही महत्वपूर्ण पहलू है। यदि आप उपयोगकर्ता को कोई सेवा प्रदान कर रहे हैं या कुछ उत्पाद बेच रहे हैं, तो आपको भविष्य के संदर्भ के लिए उपयोगकर्ता का ट्रैक रखना चाहिए। यह सब तभी संभव हो सकता है जब आपके पास प्रमाणीकरण प्रणाली हो।

लेकिन नौकरी के लिए सही टूल का इस्तेमाल करना भी बहुत जरूरी है। अतीत में, ईमेल और पासवर्ड-आधारित प्रमाणीकरण सबसे लोकप्रिय थे और व्यापक रूप से उपयोग किए जाते थे। लेकिन समय के साथ, OAuth नामक एक नई अवधारणा पेश की गई जब बड़ी तकनीकें एक विशाल उपयोगकर्ता आधार के साथ बाहर आ रही थीं। जहां आप साइट के स्वामी के रूप में उपयोगकर्ता को प्रमाणित करने के लिए OAuth प्रदाता पर भरोसा करते हैं, बदले में, OAuth प्रदाता आपको उपयोगकर्ता का विवरण देता है।

उपयोगकर्ता के लिए OAuth-आधारित प्रमाणीकरण सरल है। उन्हें केवल एक OAuth प्रदाता के साथ एक खाता बनाए रखना होगा और अन्य सभी वेबसाइटों में लॉग इन करने के लिए इस खाते का उपयोग करना होगा। लेकिन OAuth प्रक्रिया में हमेशा विश्वास शामिल होता है।

कुछ समय बाद, तस्वीर में पासवर्ड रहित प्रमाणीकरण आया। इस प्रक्रिया में, जब आप उपयोगकर्ता नाम या अपना ईमेल दर्ज करते हैं, तो वे आपको एक लिंक मेल करते हैं। यदि आप लिंक को ब्राउज़र में पेस्ट करते हैं, तो आप स्वतः प्रमाणित और लॉग इन हो जाते हैं। पासवर्ड रहित प्रमाणीकरण का सबसे सामान्य उदाहरण है जब आप hackernoon.com में लॉग इन करने के लिए सेंड मैजिक लिंक पर क्लिक करते हैं।

आर्टिफिशियल इंटेलिजेंस (एआई) और मशीन लर्निंग (एमएल) की प्रगति के साथ, चेहरे की पहचान तकनीक भारी लोकप्रियता हासिल कर रही है। समय के साथ, जैसे-जैसे डेटासेट बड़े होंगे, एआई मॉडल की सटीकता भी बढ़ेगी। आजकल, हम अपने वेब एप्लिकेशन में उपयोगकर्ताओं को प्रमाणित करने के लिए चेहरे की पहचान तकनीकों का भी उपयोग कर सकते हैं।

इस लेख में, हम चेहरे की पहचान का उपयोग करके उपयोगकर्ता को प्रमाणित करने के तरीके को प्रदर्शित करने के लिए एक साधारण एप्लिकेशन बना रहे हैं। इस प्रक्रिया में, हम फेसियो एपीआई का उपयोग करने जा रहे हैं।

हमें चेहरे की पहचान-आधारित प्रमाणीकरण की आवश्यकता क्यों है

चेहरे की पहचान की आवश्यकता कई गुना है। मैं यहाँ संक्षेप में कुछ बिन्दुओं को रखने का प्रयास कर रहा हूँ। एक पूर्ण वैचारिक समझ और एक विस्तृत कार्यान्वयन पूर्वाभ्यास प्राप्त करने के लिए लेख को अंत तक पढ़ना सुनिश्चित करें।

1. पारंपरिक तरीकों की तुलना में तेज़ : प्रमाणीकरण के पारंपरिक साधनों की तुलना में चेहरे की प्रमाणीकरण विधि बहुत तेज़ है। प्रमाणीकरण प्रक्रिया शुरू करने के लिए आपको बस एक बटन पर क्लिक करना है और एक मिलीसेकंड के भीतर, यह किया जाता है। पारंपरिक ईमेल पासवर्ड-आधारित विधियों में, आपको अपना विवरण पंक्ति दर पंक्ति जोड़ना होता है। कभी-कभी सफल लॉग-इन के बाद, आपको कैप्चा के साथ बधाई दी जाती है। यह कितना परेशान करने वाला है!
2. विशेष हार्डवेयर की आवश्यकता नहीं है : चेहरे की प्रमाणीकरण तकनीक की एकमात्र आवश्यकता एक कैमरा है। आजकल सभी स्मार्टफोन में डिफॉल्ट रूप से एक कैमरा होता है। सभी डेस्कटॉप में किसी न किसी प्रकार के वेबकैम मौजूद होते हैं। इसलिए, उपयोगकर्ताओं को इस सेवा का उपयोग करने के लिए किसी विशेष हार्डवेयर की आवश्यकता नहीं है।
3. सामाजिक मंचों पर प्रतिरूपण को कम करें : चेहरे के प्रमाणीकरण की सबसे महत्वपूर्ण विशेषता यह है कि यह प्रतिरूपण को रोक सकता है। सोशल प्लेटफॉर्म पर कई लोग किसी का नाम बताकर फर्जी अकाउंट बना लेते हैं। यह बहुत जोखिम भरा हो सकता है अगर नकली खाताधारक किसी प्रकार का डिजिटल अपराध करता है। फेशियल रिकग्निशन की मदद से, सोशल प्लेटफॉर्म यह पहचान सकते हैं कि कोई व्यक्ति जिस अकाउंट को एक्सेस करने की कोशिश कर रहा था, वह वास्तव में उनका है।
4. बॉट और स्वचालित स्क्रिप्ट को कम करें : लोगों को दोहराए जाने वाले कार्यों से छुटकारा पाने में मदद करने के लिए बॉट और स्वचालित स्क्रिप्ट पेश की जाती हैं। लेकिन लोगों ने इनका इस्तेमाल दूसरों को स्पैम करने के लिए अलग तरह से भी किया। प्रतिदिन आप अपने डिजिटल जीवन में कई बॉट और स्वचालित स्क्रिप्ट देखते हैं जिन्हें आप नोटिस या महसूस भी नहीं करते हैं। इससे बचने के लिए कुछ वेबसाइट कैप्चा का इस्तेमाल करती हैं। चेहरे की पहचान का उपयोग करके, इस समस्या को भी हल किया जा सकता है क्योंकि बॉट्स के पास प्रमाणित करने के लिए कोई चेहरा नहीं है।
5. गोपनीयता केंद्रित : गोपनीयता हम सभी के लिए एक बहुत ही संवेदनशील विषय है। हम सभी थोड़े चिंतित हो जाते हैं जब कोई आपसे आपके चेहरे के डेटा का उपयोग करके प्रमाणित करने के लिए कहता है। लेकिन जैसा कि हम इस ट्यूटोरियल में फेसियो का उपयोग कर रहे हैं, प्रमाणीकरण प्रक्रिया पूरी तरह से एंड-टू-एंड एन्क्रिप्टेड है। बैकएंड में, वे केवल आपके चेहरे की विशेषताओं का हैश स्टोर करते हैं। वे पूरी तरह से GDPR और CCPA-अनुपालन हैं। इसलिए, आप अपने डेटा को सुरक्षित रूप से संग्रहीत करने के लिए उन पर भरोसा कर सकते हैं।

एक फेशियल ऑथेंटिकेशन प्रोजेक्ट बनाएं

अब हम एक फेशियल ऑथेंटिकेशन वेब एप्लिकेशन बनाने जा रहे हैं। इस परियोजना में सभी बिट्स और टुकड़े शामिल हैं और आपको अपने वेब एप्लिकेशन में चेहरा पहचान-आधारित प्रमाणीकरण को लागू करने के तरीके के बारे में जानने की आवश्यकता है।

मैं प्रक्रिया को चरण-दर-चरण समझा रहा हूं। आप यहां एक पूर्ण स्रोत कोड प्राप्त कर सकते हैं । साथ चलने के लिए एक निःशुल्क एपीआई कुंजी प्राप्त करना सुनिश्चित करें।

आवश्यक निर्भरता स्थापित करना

एक खाली डायरेक्टरी बनाएं और उसके अंदर एक index.html फाइल बनाएं। आप एक अलग सीएसएस फ़ाइल भी जोड़ सकते हैं, लेकिन सादगी के लिए, मैं इसे न्यूनतम तक ही रखूंगा।

यदि आप विकास के लिए VSCode का उपयोग कर रहे हैं, तो आप अपनी स्थिर फ़ाइलों की सेवा के लिए लाइव सर्वर का उपयोग कर सकते हैं।

शुरुआत के लिए अपने index.html के अंदर, इस मूल HTML मार्कअप को जोड़ें।

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body></body> </html>

फेसियो अपने एआई मॉडल के साथ बातचीत करने के लिए एक बहुत ही आसान जावास्क्रिप्ट लाइब्रेरी प्रदान करता है। यह हमारे जीवन को इतना आसान बनाता है कि हम कोड की केवल कुछ पंक्तियों का उपयोग करके चेहरे की पहचान की सुविधा को लागू कर सकते हैं। फेसियो जावास्क्रिप्ट लाइब्रेरी को जोड़ने के लिए, हम अपने एचटीएमएल दस्तावेज़ के बॉडी टैग के अंदर उनके सीडीएन (सामग्री वितरण नेटवर्क) का उपयोग करते हैं।

 <body> <script src="https://cdn.faceio.net/fio.js"></script> </body>

अब, एक फ़ाइल index.js बनाएँ और फ़ाइल को FaceIO CDN के बाद बॉडी टैग के अंदर लिंक करें।

 <body> <script src="https://cdn.faceio.net/fio.js"></script> <script src="./index.js"></script> </body>

अब हमारी विकास प्रक्रिया को आसान बनाने के लिए 2 सहायक फंक्शन बनाते हैं। एक उपयोगकर्ता को नामांकित करने के लिए है (जैसे साइन-अप सुविधा) और दूसरा प्रमाणीकरण के लिए है (जैसे लॉग-इन सुविधा)।

एक उपयोगकर्ता का नामांकन

फेसियो द्वारा प्रदान की जाने वाली जावास्क्रिप्ट लाइब्रेरी के कारण उपयोगकर्ता का नामांकन करना बहुत आसान है। HTML मार्कअप के अंदर id="enroll" वाला एक बटन जोड़ें। हम getElementbyID विधि का उपयोग करके इस बटन को अपनी जावास्क्रिप्ट फ़ाइल के अंदर एक्सेस करते हैं।

अब फेसियो ऑब्जेक्ट को index.js के अंदर इनिशियलाइज़ करें। आपको अपने फेसियो प्रोजेक्ट की पब्लिक आईडी को ऐड करना होगा। आप अपने प्रोजेक्ट डैशबोर्ड में सार्वजनिक आईडी सूचीबद्ध करवा सकते हैं।

 const faceio = new faceIO("<Your Public ID here");

आइए नामांकन बटन में एक ईवेंट श्रोता जोड़ें। जब कोई बटन पर क्लिक करता है, तो हम फेसियो ऑब्जेक्ट की एनरोल विधि को निष्पादित करते हैं। यह नामांकन पद्धति विभिन्न प्रकार के वैकल्पिक पैरामीटर लेती है।

1. locale उपयोगकर्ता की स्थानीय भाषा है।
2. permissions timeout उपयोगकर्ता को कैमरे तक पहुँच प्रदान करने के लिए प्रतीक्षा करने के लिए सेकंड की संख्या से मेल खाती है।
3. termsTimeout , फेसियो के नियमों और शर्तों को स्वीकार करने के लिए उपयोगकर्ता द्वारा प्रतीक्षा करने के लिए सेकंड की संख्या है।
4. idleTimeout किसी चेहरे को पहचानने का प्रयास करते समय प्रतीक्षा करने के लिए सेकंड की कुल संख्या है।
5. replyTimeout फेसियो नोड से संसाधित चेहरे का डेटा प्राप्त करने के लिए प्रतीक्षा करने के लिए सेकंड की संख्या है।
6. userConcent एक बूलियन है जो यह दर्शाता है कि उपयोगकर्ता अपने चेहरे को स्कैन करने के लिए सहमति देते हैं या नहीं। यदि आपने पहले ही उपयोगकर्ता से सहमति ले ली है तो आप मान को true पर सेट कर सकते हैं।
7. payload : नामांकन समारोह के अंदर आप अपनी पसंद का पेलोड जोड़ सकते हैं। पेलोड एक महत्वपूर्ण मूल्य वस्तु होना चाहिए। आप अपना ईमेल पता या उपयोगकर्ता से संबंधित कोई अन्य जानकारी संलग्न करने के लिए इस पेलोड सुविधा का उपयोग कर सकते हैं।

हमारे मामले में, नामांकन समारोह इस तरह दिखता है।

 enroll.addEventListener("click", async () => { let response = await faceio.enroll({ locale: "auto", payload: { email: "[email protected]", pin: "12345", }, }); console.log(` Unique Facial ID: ${response.facialId} Enrollment Date: ${response.timestamp} Gender: ${response.details.gender} Age Approximation: ${response.details.age}`); });

जब आप इस फ़ंक्शन को चलाते हैं, तो उपयोगकर्ता के सामने एक पॉपअप दिखाई देता है। इस पॉपअप में नियम और शर्तें शामिल हैं। यदि उपयोगकर्ता नियम और शर्तों को स्वीकार करता है, तो वह कैमरा एक्सेस मांगता है। यदि उपयोगकर्ता कैमरा एक्सेस देता है, तो फेसियो चेहरे को स्कैन करेगा।

फेसियो मॉडल अद्वितीय चेहरे की विशेषताओं की तलाश करता है जो उपयोगकर्ता को दूसरों से अलग करता है। एक बार पूरा हो जाने पर, आपको एक पिन जोड़ना होगा जो आपके चेहरे के डेटा से जुड़ा हो। यह पिन उपयोगकर्ता के लिए बहुत महत्वपूर्ण है और इसे सुरक्षित स्थान पर रखता है।

जब ये सभी चरण पूरे हो जाते हैं, तो FaceIO उपयोगकर्ता को एक userInfo ऑब्जेक्ट लौटाता है। इस ऑब्जेक्ट में एक यूजर फेस आईडी है जो एक सार्वभौमिक रूप से विशिष्ट पहचानकर्ता, लिंग और आयु है। लिंग और उम्र बहुत सटीक नहीं हैं, क्योंकि उनकी भविष्यवाणी एआई मॉडल द्वारा की जाती है।

आप इस फेसआईडी को अपने बैकएंड में स्टोर कर सकते हैं। जब कोई उपयोगकर्ता लॉग इन करना चाहता है, तो आप उपयोगकर्ता को प्रमाणित करने के लिए इस फेसआईडी का मिलान कर सकते हैं।

वर्कफ़्लो के दौरान, यदि कोई त्रुटि होती है, तो FaceIO में त्रुटि संदेशों की एक विस्तृत सूची है। यदि उपयोगकर्ता कैमरे तक पहुंच की अनुमति नहीं देता है तो fioErrCode.PERMISSION_REFUSED त्रुटि फेंक दी जाती है।

यदि उपयोगकर्ता नियम और शर्तों पॉपअप को स्वीकार नहीं करता है तो सर्वर द्वारा fioErrCode.TERMS_NOT_ACCEPTED त्रुटि फेंक दी जाती है।

एक उपयोगकर्ता को प्रमाणित करना

प्रमाणीकरण प्रवाह आरंभ करने के लिए, अपने HTML मार्कअप में id="authenticate" के साथ एक बटन जोड़ें। getElementbyID विधि की सहायता से index.js के अंदर इस बटन को एक्सेस करें।

अब जब उपयोगकर्ता इस बटन को दबाता है, तो हम प्रमाणीकरण प्रवाह आरंभ करते हैं। प्रमाणीकरण समारोह बहुत सरल है।

प्रमाणीकरण फ़ंक्शन पिछले enroll() फ़ंक्शन की तरह permissionTimeout टाइमआउट, replyTimeout idleTimeout और locale पैरामीटर लेता है। कोड कुछ इस तरह दिखता है।

 authenticate.addEventListener("click", async () => { let response = await faceio.authenticate({ locale: "auto", }); console.log(` Unique Facial ID: ${response.facialId} PayLoad: ${response.payload} `); });

जब उपयोगकर्ता प्रमाणीकरण बटन दबाता है, तो एक समान स्क्रीन पॉपअप होता है जैसे नामांकन समारोह के मामले में। यह आपके कैमरे तक पहुंच लेता है और आपके चेहरे को स्कैन करता है। एक बार स्कैन करने के बाद, यह पिन मांगता है जो आपने नामांकन के समय दर्ज किया था।

यदि आप सही पिन प्रदान करते हैं, तो फेसियो ने नामांकन प्रक्रिया में आपके द्वारा निर्दिष्ट फेसडाटा और पेलोड लौटा दिया।

आप अपने सर्वर में फेसआईडी का मिलान करके प्रमाणीकरण प्रवाह की दोबारा जांच भी कर सकते हैं।

अब हमारा प्रमाणीकरण प्रवाह पूरा हो गया है। आप देख सकते हैं कि ईमेल पासवर्ड ऑथ फ्लो को लागू करने की तुलना में यह आसान है। सभी भारी भार फेसियो सर्वर और उसके एआई मॉडल द्वारा किया जाता है, एक डेवलपर के रूप में, आपको प्रमाणीकरण प्रवाह और उसके अनुभव को संशोधित करने के लिए केवल एप्लिकेशन तर्क जोड़ना होगा।

गोपनीयता सुविधाएँ

फेसियो में एक मजबूत गोपनीयता सुरक्षा प्रणाली है। मुझे उनमें से कुछ को सूचीबद्ध करने दें।

1. यह GDPR और CCPA के अनुरूप है : FaceIO सेवा पूरी तरह से GDPR और CCPA के अनुरूप है। GDPR का मतलब जनरल डेटा प्रोटेक्शन रेगुलेशन है। इसे 2018 में अपनाया गया था और इसमें सभी व्यवसायों को उपयोगकर्ता के व्यक्तिगत डेटा और गोपनीयता की रक्षा करने की आवश्यकता होती है।

   
   

   CCPA का मतलब कैलिफोर्निया उपभोक्ता संरक्षण अधिनियम है जो उपयोगकर्ता को उनके डेटा पर अधिक नियंत्रण देता है। यदि आप उन क्षेत्रों में काम कर रहे हैं, तो आपको चिंता करने की जरूरत नहीं है।

   
   

2. यह केवल हैश स्टोर करता है: फेसियो केवल आपके चेहरे की विशेषताओं के हैश को स्टोर करता है। यह कोई सादा डेटा संग्रहीत नहीं करता है और यथासंभव न्यूनतम जानकारी संग्रहीत करता है। क्लाइंट-साइड लाइब्रेरी और विजेट किसी भी बायोमेट्रिक्स डेटा को हैंडल नहीं करते हैं। सारी प्रक्रिया बैकएंड पर की जाती है।

सामान्य प्रश्न

क्या फेसियो ब्राउज़र अज्ञेयवादी है?

फेसियो पूरी तरह से ब्राउज़र अज्ञेयवादी है। यह क्रोम, फ़ायरफ़ॉक्स और सफारी सहित किसी भी ब्राउज़र को चला सकता है। जैसा कि सभी प्रसंस्करण सर्वर पर किया जाता है, फेसियो को चलाने के लिए केवल आपके कैमरे की आवश्यकता होती है।

यदि आप जावास्क्रिप्ट को अक्षम करके कुछ गोपनीयता ब्राउज़र का उपयोग कर रहे हैं, तो उन्हें सक्षम करना सुनिश्चित करें। जैसा कि फेसियो को सर्वर से बात करने के लिए जावास्क्रिप्ट का उपयोग करने की आवश्यकता होती है।

क्या हम अपना मॉडल खरोंच से नहीं बना सकते?

हां, आप अपने मॉडल को खरोंच से बना सकते हैं और अपने वेब ऐप में चेहरे की प्रमाणीकरण सुविधा को लागू कर सकते हैं। लेकिन इसके लिए आपको आर्टिफिशियल इंटेलिजेंस और मशीन लर्निंग प्रोसेस की गहरी समझ होनी चाहिए।

जैसा कि अधिकांश वेब डेवलपर इस पृष्ठभूमि से नहीं हैं, यह पहिया को फिर से शुरू करने के बजाय एक सुविधा को लागू करने के लिए दूसरों की सेवाओं का उपयोग करने के लिए एक स्मार्ट कदम है।

बाजार में अन्य समाधान मौजूद हैं जिन्हें आप एक्सप्लोर कर सकते हैं। एक एडब्ल्यूएस मान्यता है। यह सेवा एडब्ल्यूएस द्वारा पेश की जाती है और फेसियो के समान ही काम करती है। दिलचस्प बात यह है कि आप अपने फेसियो डैशबोर्ड के अंदर एडब्ल्यूएस रिकॉग्निशन का विकल्प चुन सकते हैं।

हाँ यह संभव है। अब आप जो चाहते हैं उसे चुन सकते हैं और इसके लिए जा सकते हैं।

सार्वजनिक आईडी छुपाएं

जैसा कि हम कोडिंग भाग में देख सकते हैं, फेसियो ऑब्जेक्ट की शुरुआत के दौरान आपको अपनी सार्वजनिक आईडी देनी होगी। आप चाहें तो पर्यावरण चर का उपयोग करके इसे छिपा सकते हैं। यदि आप फ़्रंट-एंड फ़्रेमवर्क या बिल्ड सिस्टम का उपयोग कर रहे हैं, तो आप बिल्ड समय पर इन मानों को गतिशील रूप से जोड़ सकते हैं।

यदि आप नेक्स्टजेएस का उपयोग कर रहे हैं, तो आप अपने संवेदनशील क्रेडेंशियल्स को बचाने के लिए .env.local फ़ाइल का उपयोग कर सकते हैं।

यदि आप किसी फ्रेमवर्क का उपयोग नहीं कर रहे हैं, तो आप Vite का उपयोग कर सकते हैं। Vite पर्यावरण चर का समर्थन करता है। यह तेजी से तैनाती के लिए आपके वेनिला जेएस प्रोजेक्ट को बनाता और संपीड़ित करता है। बस एक .env फ़ाइल बनाएं, वहां अपने सभी क्रेडेंशियल डालें, और आपका काम हो गया। अपनी .env फ़ाइल को अपनी .gitignore सूची के अंदर रखना न भूलें।

निष्कर्ष

यदि आप इस लेख को अब तक पढ़ते हैं, तो मुझे लगता है कि आपको यह लेख पसंद आया होगा। कृपया इसे अपने साथियों के साथ साझा करें। यदि आप कोई प्रतिक्रिया देना चाहते हैं, तो मैं ट्विटर पर ऋषिकेशपाठक के रूप में उपलब्ध हूं। पढ़ते रहो, सीखते रहो।